<template>
  <div class="myaccount">
    <div class="title" v-show="flag == 0">
      {{ $t('assemble.个人档案') }}
    </div>
    <div class="title" v-show="flag == 1">
      <p>{{ $t('assemble.个人档案') }}</p>
      <p>--{{ $t('assemble.更改手机号') }}</p>
    </div>

    <div class="title" v-show="flag == 2">
      <p>{{ $t('assemble.个人档案') }}</p>
      <p>--{{ $t('assemble.添加邮箱') }}</p>
    </div>

    <p class="heng"></p>
    <div class="userMessage" v-show="flag == 0">
      <div class="input-box">
        <p>{{ $t('assemble.用户名称') }}</p> <el-input v-model="userName" :placeholder="$t('assemble.请输入')"
          style="width: 585px;"></el-input>
        <span @click="handleChange(3)">{{ $t('assemble.更换') }}</span>
      </div>
      <div class="input-box">
        <p>{{ $t('assemble.手机号') }}</p> <el-input v-model="iphNum" :placeholder="$t('assemble.请输入')"
          style="width: 585px;"></el-input>
        <span @click="handleChange(1)">{{ $t('assemble.更换') }}</span>
      </div>
      <div class="input-box">
        <p>{{ $t('assemble.邮箱地址') }}</p> <el-input v-model="email" :placeholder="$t('assemble.邮箱地址')"
          style="width: 585px;"></el-input>
        <span @click="handleChange(2)">{{ $t('assemble.添加') }}</span>
      </div>
      <!-- <div class="save btn">保存</div> -->
    </div>
    <!-- 修改昵称 -->
    <div class="userMessage" v-show="flag == 3">
      <div class="input-box">
        <p>{{ $t('assemble.新用户名') }}</p> <el-input v-model="newnickname" :placeholder="$t('assemble.请输入')"
          style="width: 585px;"></el-input>

      </div>
      <!-- <div class="input-box">
        <p>验证码</p> <el-input v-model="iphNumcode" placeholder="请输入" style="width: 585px;"></el-input>
        <span v-if="codeflag" @click="getCode">发送验证码</span>
        <p v-else class="gain"> {{ time }}s</p>

      </div> -->
      <div class="save btn" @click="updateusername(0)">{{ $t('assemble.确定') }}</div>

    </div>
    <!-- 更改手机号 -->
    <div class="userMessage" v-show="flag == 1">
      <div class="input-box">
        <p>{{ $t('assemble.新手机号') }}</p> <el-input v-model="newiphNum" :placeholder="$t('assemble.请输入')"
          style="width: 585px;"></el-input>

      </div>
      <div class="input-box">
        <p>{{ $t('assemble.验证码') }}</p> <el-input v-model="iphNumcode" :placeholder="$t('assemble.请输入')"
          style="width: 585px;"></el-input>
        <span v-if="codeflag" @click="getCode">{{ $t('assemble.发送验证码') }}</span>
        <p v-else class="gain"> {{ time }}s</p>

      </div>
      <div class="save btn" @click="updateshoujihao(0)">{{ $t('assemble.确定') }}</div>

    </div>
    <!-- 添加邮箱 -->
    <div class="userMessage" v-show="flag == 2">
      <div class="input-box">
        <p>{{ $t('assemble.新邮箱') }}</p> <el-input v-model="newemail" :placeholder="$t('assemble.请输入')"
          style="width: 585px;"></el-input>

      </div>
      <div class="input-box">
        <p>{{ $t('assemble.验证码') }}</p> <el-input v-model="emailcode" :placeholder="$t('assemble.请输入')"
          style="width: 585px;"></el-input>
        <span v-if="codeflag" @click="getCode">{{ $t('assemble.发送验证码') }}</span>
        <p v-else class="gain"> {{ time }}s</p>
      </div>
      <div class="save btn" @click="updateemail(0)">{{ $t('assemble.确定') }}</div>

    </div>
  </div>
</template>
<script>
import { sendcode, check, resetmobile, updatenickname, resetemail } from "../../../utils/api"
export default {
  data() {
    return {
      userName: '',//用户名称
      iphNum: '',//手机号
      email: '',//邮箱
      newiphNum: '',//新手机号
      iphNumcode: '',//更换手机号验证码
      newemail: "",//新邮箱
      emailcode: '',//更换邮箱验证码
      flag: 0,
      codeflag: true,//控制验证码
      time: 60,
      newnickname: "",//新用户名

    }
  },
  mounted() {
    let userinfo = JSON.parse(localStorage.getItem("userinfo"))
    this.email = localStorage.getItem("email")
    // console.log("userinfo", userinfo)
    this.userName = userinfo.nickname
    this.iphNum = userinfo.mobile

  },
  methods: {
    // 事件名称  注册register |  忘记密码resetpwd | 修改邮箱resetemail | 修改手机号resetmobile
    handleChange(val) {
      this.flag = val
      console.log("email", this.email)
    },
    //获取验证码
    async getCode() {

      const that = this
      that.codeflag = false
      const interval = window.setInterval(function () {
        if ((that.time--) <= 0) {
          that.time = 60
          that.codeflag = true
          window.clearInterval(interval)
        }
      }, 1000)
      let type = ""
      if (that.flag == 1) {
        type = "resetmobile"
      }
      if (that.flag == 2) {
        type = "resetemail"
      }
      let data = {
        email: that.email,
        event: type
      }
      let res = await sendcode(data)
      if (res.code == 1) {
        console.log("验证码")

      }

    },

    //修改手机号
    async updateshoujihao() {
      let data = {
        email: this.email,
        captcha: this.iphNumcode,
        newmobile: this.newiphNum
      }
      let res = await resetmobile(data)
      if (res.code == 1) {
        // console.log("修改手机号", res)
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.flag = 0
        this.iphNumcode = ""
        this.newiphNum = ""
        this.iphNum = res.data.userinfo.mobile
        let userinfo = res.data.userinfo
        let token = res.data.userinfo.token
        localStorage.setItem('token', token)
        localStorage.setItem('userinfo', JSON.stringify(userinfo))
      }
    },

    //修改昵称
    async updateusername() {
      let data = {
        nickname: this.newnickname
      }
      let res = await updatenickname(data)
      if (res.code == 1) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        // console.log("修改用户名", res)
        this.flag = 0
        this.userName = this.newnickname
        this.newnickname = ""
        let userinfo = JSON.parse(localStorage.getItem("userinfo"))
        userinfo.nickname = this.userName
        localStorage.setItem('userinfo', JSON.stringify(userinfo))
      } else {
        this.$message({
          message: res.msg,
          type: 'success'
        });

      }
    },
    //修改邮箱
    async updateemail() {
      let data = {
        newemail: this.newemail,
        captcha: this.emailcode,
        email: this.email
      }
      let res = await resetemail(data)
      if (res.code == 1) {
        // console.log("修改youxaing", res)
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.flag = 0
        this.emailcode = ""
        this.email = this.newemail
        this.newemail = ""

        let userinfo = res.data.userinfo
        let token = res.data.userinfo.token
        localStorage.setItem('email', this.email)
        localStorage.setItem('token', token)
        localStorage.setItem('userinfo', JSON.stringify(userinfo))
      } else {
        this.$message({
          message: res.msg,
          type: 'success'
        });

      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }
    },



  }
}
</script>
<style scoped lang="scss">
.myaccount {
  width: 850px;
  height: 796px;
  background: #FFFFFF;
  // background-color: red;
  box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-top: 100px;
  margin-left: 20px;
  padding: 10px;
  box-sizing: border-box;

  .title {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 17px;
    display: flex;

  }

  .heng {
    width: 830px;
    height: 1px;
    opacity: 1;
    background-color: #EDEDED;
  }

  .userMessage {
    margin-left: 30px;

    .input-box {
      display: flex;
      align-items: center;
      position: relative;

      .gain {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #E00000;
        line-height: 16px;
        position: absolute;
        right: 500px;
        top: 10px;
        cursor: pointer;
      }

      p {
        margin-right: 10px;
        width: 80px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 300;
        color: #333333;
        line-height: 17px;
        text-align: right;
      }

      span {
        display: inline-block;
        // width: 72px;
        height: 34px;
        background: #E00000;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;
        text-align: center;
        position: absolute;
        right: 130px;
        cursor: pointer;
        padding: 0 10px;

      }
    }

    .btn {
      width: 350px;
      height: 45px;
      border-radius: 22px 22px 22px 22px;
      opacity: 1;
      border: 1px solid #E00000;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #E00000;
      line-height: 45px;
      text-align: center;
      margin: 50px 168px;
      cursor: pointer;
    }
  }
}
</style>